<template>
  <v-layout type="main">
    <el-form class="form" ref="form" :model="addForm" :rules="submitRules" label-width="124px">
      <el-form-item label="名称" prop="name">
        <el-input type="text" v-model="addForm.name" />
      </el-form-item>
      <el-form-item label="GPU类型" prop="gpu_model_type">
        <el-radio-group v-model="addForm.gpu_model_type">
          <el-radio :label="0">GPU</el-radio>
          <el-radio :label="1">虚拟GPU</el-radio>
        </el-radio-group>
      </el-form-item>
      <div v-if="addForm.gpu_model_type == 0">
        <el-form-item label="GPU型号" prop="gpu_model_id">
          <el-select class="short-input" clearable v-model="addForm.gpu_model_id" placeholder="请选择">
            <el-option v-for="item in gpuModelMap" :key="item.id" :label="item.model" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="GPU" prop="gpu_num">
          <el-input type="text" v-model="addForm.gpu_num">
            <template slot="append">
              <div class="short-append">个</div>
            </template>
          </el-input>
        </el-form-item>
      </div>
      <div v-if="addForm.gpu_model_type == 1">
        <el-form-item label="GPU使用率" prop="gpu_model_use_rate">
          <el-input type="text" v-model="addForm.gpu_model_use_rate">
            <template slot="append">
              <div class="short-append">个</div>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="GPU显存使用量" prop="gpu_model_mem">
          <el-input type="text" v-model="addForm.gpu_model_mem">
            <template slot="append">
              <div class="short-append">个</div>
            </template>
          </el-input>
        </el-form-item>
      </div>

      <el-form-item label="CPU" prop="cpu_num">
        <el-input type="text" v-model="addForm.cpu_num">
          <template slot="append">
            <div class="short-append">毫核</div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="内存" prop="mem_num">
        <el-input type="text" v-model="addForm.mem_num">
          <template slot="append">
            <div class="short-append">Mi</div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="RDMA网卡数量" prop="rdma_num">
        <el-input type="text" v-model="addForm.rdma_num">
          <template slot="append">
            <div class="short-append">张</div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label=" ">
        <el-button class="none-type" @click="submit">确定</el-button>
      </el-form-item>

    </el-form>
  </v-layout>
</template>

<script>
import { addProduct, putProduct, productDetail } from '@/api/product'
import { getAllGpuModel } from '@/api/gpu'
export default {
  data() {
    return {
      addForm: {
        gpu_model_type: 0
      },
      submitRules: {
        username: [
          { required: true, message: "请填写名称" },
        ],
        gpu_model_id: [
          { required: true, message: "请选择GPU型号" },
        ],
        gpu_num: [
          { required: true, message: "请填写GPU数量" },
        ],
        gpu_model_use_rate: [
          { required: true, message: "请填写虚拟GPU使用率" },
        ],
        gpu_model_mem: [
          { required: true, message: "请填写GPU显存使用量" },
        ],
        cpu_num: [
          { required: true, message: "请填写cpu使用量" },
        ],
        mem_num: [
          { required: true, message: "请填写内存使用量" },
        ]
      },
      gpuModelMap: []
    };
  },
  async created() {
    this.getGpuModelAll()
    this.getData()
  },
  methods: {
    async getData() {
      if (this.$route.query.id) {
        let res = await productDetail({ id: this.$route.query.id })
        this.addForm = res.data
      }
    },
    async getGpuModelAll() {
      let res = await getAllGpuModel()
      this.gpuModelMap = res.data
    },
    async submit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if (this.$route.query.id) {
            await putProduct({ ...this.addForm })
          } else {
            await addProduct({ ...this.addForm })
          }
          this.$router.push({
            path: '/product'
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.short-append {
  width: 80px;
  text-align: center;
}
</style>